<template>
  <view class="menu" :class="[getClass]">
    <!-- 
    :style="[{ top: 'calc(' + statusBarHeight + 'px + 88rpx)' }]"
    -->

    <view class="menuContent">
      <view class="menuHeader">
        <scroll-view
          class="scrollView"
          scroll-x="true"
          :scroll-into-view="scrollIntoView"
          scroll-anchoring
          scroll-with-animation
        >
          <div class="list">
            <view
              class="item"
              :class="[index === 0 ? 'first' : '']"
              :id="`item${item.id}`"
              v-for="(item, index) of categoryList"
              :key="item.id"
            >
              <view
                class="box"
                @click="change(item.id)"
                :class="[getItemClass(item.id)]"
              >
                {{ item.name }}
              </view>
            </view>
          </div>
        </scroll-view>
        <i class="iconfont icon-arrow-down" @click.stop="isShow = !isShow"></i>
      </view>

      <view
        class="menuPoa"
        :style="{ top: `calc(${statusBarHeight}px + 80rpx)` }"
      >
        <view class="menuTitle" v-if="isShow">全部分类</view>

        <view class="menuConcent">
          <category
            :categoryList="categoryList"
            :catId="catId"
            @change="id => change(id)"
          ></category>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import category from '../../components/category.vue';

export default {
  components: {
    category,
  },

  props: {
    categoryList: {
      type: Array,
      default() {
        return [];
      },
    },
    catId: {
      type: [String, Number],
      default: undefined,
    },
    scrollIntoView: {
      type: String,
      default: '',
    },
    current: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      isShow: false,
    };
  },

  computed: {
    getItemClass() {
      return catId => {
        return catId === this.catId ? 'active' : '';
      };
    },

    getClass() {
      return !this.isShow ? 'on' : '';
    },
  },

  methods: {
    change(id) {
      this.isShow = false;
      if (this.catId === id) {
        return;
      }

      this.$emit('change', id);
    },
  },
};
</script>

<style lang="scss" scoped>
.menu {
  .menuContent {
    padding: 0 30rpx;
    background: #fff;
  }

  .menuPoa {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: background-color 0.2s ease-in;
    // transition: transform .6s linear;
    z-index: 3;
  }

  .menuConcent {
    padding: 0 16rpx 30rpx;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    max-height: 80%;
    transition: 0.3s all;
  }

  .iconfont {
    transform: rotate(180deg);
  }

  &.on {
    .menuHeader .iconfont {
      transform: rotate(0deg);
    }

    .menuPoa {
      background: rgba(0, 0, 0, 0);
      transform: translateY(-200%);
    }

    // .menuBox {
    // }
  }
}

.menuTitle {
  padding: 12rpx 30rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;
  background: #fff;
}

.menuHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .iconfont {
    position: relative;
    right: -18rpx;
    z-index: 6;
    color: #8c8c8c;
    font-size: 50rpx;
    transition: 0.3s all;
  }
}

.scrollView {
  flex: 1;
  width: 0;
  overflow: hidden;
  background: #fff;
  .list {
    white-space: nowrap;
    padding: 8rpx 0;
    // height: 40rpx;
    // line-height: 40rpx;
    font-size: 28rpx;

    .item {
      display: inline-block;
      padding: 0 20rpx;

      &.first {
        padding-left: 0;
      }

      .box {
        color: #8c8c8c;
        transition: 0.3s all;

        &.active {
          color: #262626;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
